{"ast":null,"code":"var _jsxFileName = \"/data/messenger.client/src/components/DialogInput/index.tsx\",\n  _s = $RefreshSig$();\nimport React, { useEffect } from \"react\";\nimport { IconButton, TextField } from \"@mui/material\";\nimport classNames from \"classnames\";\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\nimport './DialogInput.scss';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst DialogInput = props => {\n  _s();\n  const [value, setValue] = React.useState(false);\n  const [textField, setTextField] = React.useState('');\n  const [emojiPickerVisible, setEmojiPickerVisible] = React.useState(false);\n  let [upload] = useUpload(_ref => {\n    let {\n      files\n    } = _ref;\n    return {\n      method: \"PUT\",\n      url: \"http://localhost:4000\",\n      body: files[0]\n    };\n  });\n  const maxSizeMessage = 500;\n  useEffect(() => {\n    if (textField.length > 0) {\n      setValue(true);\n    } else {\n      setValue(false);\n    }\n  }, [textField]);\n  const toggleEmojiPicker = () => {\n    setEmojiPickerVisible(!emojiPickerVisible);\n  };\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"dialogInput-form\",\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"dialogInput-emoji\",\n      children: [/*#__PURE__*/_jsxDEV(IconButton, {\n        type: \"button\",\n        className: \"dialogInput-form-smile\",\n        onClick: () => toggleEmojiPicker()\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 38,\n        columnNumber: 25\n      }, this), emojiPickerVisible && /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"dialogInput__emoji-picker\",\n        children: /*#__PURE__*/_jsxDEV(Picker, {\n          theme: \"light\",\n          locale: \"ru\",\n          data: data\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 45,\n          columnNumber: 33\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 44,\n        columnNumber: 29\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 37,\n      columnNumber: 21\n    }, this), /*#__PURE__*/_jsxDEV(TextField, {\n      className: classNames(\"dialogInput-form-input\", {\n        \"dialogInput-form-input--error\": textField.length > maxSizeMessage\n      }),\n      onChange: e => setTextField(e.target.value),\n      variant: \"outlined\",\n      label: textField.length > 0 && `${textField.length}/${maxSizeMessage}` || null,\n      multiline: true,\n      rows: textField.length > maxSizeMessage * 0.05 ? 3 : 1,\n      placeholder: \"\\u0412\\u0432\\u0435\\u0434\\u0438\\u0442\\u0435 \\u0441\\u043E\\u043E\\u0431\\u0449\\u0435\\u043D\\u0438\\u0435\",\n      inputProps: {\n        'aria-label': 'Введите сообщение'\n      }\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 49,\n      columnNumber: 21\n    }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n      className: \"dialogInput-form-image\",\n      type: \"file\",\n      accept: \"image/*\",\n      multiple: true,\n      onChange: e => {\n        if (e.target.files) {\n          upload({\n            files: e.target.files\n          });\n        }\n      }\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 61,\n      columnNumber: 21\n    }, this), /*#__PURE__*/_jsxDEV(IconButton, {\n      type: \"button\",\n      className: \"dialogInput-form-document\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 72,\n      columnNumber: 21\n    }, this), value && /*#__PURE__*/_jsxDEV(IconButton, {\n      type: \"button\",\n      className: \"dialogInput-form-send\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 78,\n      columnNumber: 29\n    }, this) || /*#__PURE__*/_jsxDEV(IconButton, {\n      type: \"button\",\n      className: \"dialogInput-form-microphone\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 82,\n      columnNumber: 30\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 36,\n    columnNumber: 17\n  }, this);\n};\n_s(DialogInput, \"leETUyg9hciKgFDz8BhAuPd4GS4=\", false, function () {\n  return [useUpload];\n});\n_c = DialogInput;\nexport default DialogInput;\nvar _c;\n$RefreshReg$(_c, \"DialogInput\");","map":{"version":3,"names":["React","useEffect","IconButton","TextField","classNames","data","Picker","useUpload","DialogInput","props","value","setValue","useState","textField","setTextField","emojiPickerVisible","setEmojiPickerVisible","upload","files","method","url","body","maxSizeMessage","length","toggleEmojiPicker","e","target"],"sources":["/data/messenger.client/src/components/DialogInput/index.tsx"],"sourcesContent":["import React, {useEffect} from \"react\";\nimport {IconButton, Paper, TextField} from \"@mui/material\";\nimport {DialogInputProps} from \"../../models/props/DialogInputProps\";\nimport classNames from \"classnames\";\nimport data from '@emoji-mart/data'\nimport Picker from '@emoji-mart/react'\nimport { useUpload } from \"@zach.codes/use-upload/lib/react\";\nimport './DialogInput.scss';\n\nconst DialogInput: React.FC<DialogInputProps> = (props) => {\n    const [value, setValue] = React.useState<boolean>(false);\n    const [textField, setTextField] = React.useState<string>('');\n    const [emojiPickerVisible, setEmojiPickerVisible] = React.useState<boolean>(false);\n\n    let [upload] = useUpload(({ files }) => ({\n        method: \"PUT\",\n        url: \"http://localhost:4000\",\n        body: files[0],\n    }));\n\n    const maxSizeMessage = 500;\n\n    useEffect(() => {\n        if (textField.length > 0) {\n            setValue(true);\n        } else {\n            setValue(false);\n        }\n    }, [textField]);\n\n    const toggleEmojiPicker = () => {\n        setEmojiPickerVisible(!emojiPickerVisible);\n    }\n\n        return (\n                <div className=\"dialogInput-form\">\n                    <div className=\"dialogInput-emoji\">\n                        <IconButton\n                            type=\"button\"\n                            className='dialogInput-form-smile'\n                            onClick={() => toggleEmojiPicker()}\n                        />\n                        {emojiPickerVisible && (\n                            <div className=\"dialogInput__emoji-picker\">\n                                <Picker theme=\"light\" locale=\"ru\" data={data}/>\n                            </div>\n                        )}\n                    </div>\n                    <TextField\n                        className={classNames(\"dialogInput-form-input\", {\n                            \"dialogInput-form-input--error\": textField.length > maxSizeMessage\n                        })}\n                        onChange={e => (setTextField(e.target.value))}\n                        variant=\"outlined\"\n                        label={((textField.length > 0 && `${textField.length}/${maxSizeMessage}`) || null)}\n                        multiline\n                        rows={(textField.length > maxSizeMessage * 0.05)? 3: 1}\n                        placeholder=\"Введите сообщение\"\n                        inputProps={{ 'aria-label': 'Введите сообщение' }}\n                    />\n                    <input\n                        className='dialogInput-form-image'\n                        type=\"file\"\n                        accept=\"image/*\"\n                        multiple\n                        onChange={(e) => {\n                            if (e.target.files) {\n                                upload({ files: e.target.files });\n                            }\n                        }}\n                    />\n                    <IconButton\n                        type=\"button\"\n                        className='dialogInput-form-document'\n                    />\n                    {\n                        (value &&\n                            <IconButton\n                                type=\"button\"\n                                className='dialogInput-form-send'\n                            />) ||\n                            (<IconButton\n                                type=\"button\"\n                                className='dialogInput-form-microphone'\n                            />)\n                    }\n            </div>\n        );\n}\n\nexport default DialogInput;"],"mappings":"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"},"metadata":{},"sourceType":"module"}